<template>
    <!-- 顶部固定栏 -->
    <div class="topbar">
        <!-- gitee仓库地址 -->
        <div class="icon" @mouseover="appear" @mouseleave="hidenFrame">
            <div>
                <i class="iconfont icon-gitee-fill-round" style="font-size: 26px;color: rgb(199, 29, 35);"></i>
            </div>
            <div style="margin-top:-4px;">gitee</div>
            <div class="urlthree" v-if="state.frame"></div>
            <div class="urlSelect" v-if="state.frame">
                <div class="urlSelect-item .urlSelect-item-one" :class="state.framebgone===true ? 'item-bg':''" @mouseover="appearbg(1)" @mouseleave="hidenFramebg(1)"><a href="https://gitee.com/hua--xuan/estate-management">前端</a></div>
                <div class="urlSelect-item .urlSelect-item-two" :class="state.framebgtwo===true ? 'item-bg':''" @mouseover="appearbg(2)" @mouseleave="hidenFramebg(2)">后端</div>
            </div>
        </div>
    </div>
    <!-- 宣传 -->
    <div class="all">
        <!-- 物业平台名字 -->
        <div class="Name">
            智慧物业平台
        </div>
        <!-- 平台简介 -->
        <div class="introduce">
            XXX是一套成熟的智慧物业管理系统，功能齐全，聚焦数据和技术优势，开启智慧物业之旅。
        </div>
        <!-- 快速开始按钮 -->
        <div class="start-button">
            <el-button type="primary" plain @click="goLogin">
                开始&nbsp;&nbsp;&nbsp;<i class="iconfont icon-a-youjiantouzhixiangyoujiantou" style="color: #409eff;;"></i>
            </el-button>
        </div>
    </div>
    <!-- 更多介绍 -->
    <div class="more-introduce">
        <div class="more-introduce-item" :class="item.show===true?'sus':''" v-for="item in state.introduceItem" :key="item.id" @mouseover="suspension(item.id)" @mouseleave="disSuspension(item.id)">
            <div class="more-introduce-item-icon" :class="item.show===true?'icon-bgchange':''">
                <i class="iconfont" :class="item.icon"></i>
            </div>
            <div class="more-introduce-item-title">{{ item.title }}</div>
            <div class="more-introduce-item-box" v-for="line in item.text" :key="item">
                {{ line }}
            </div>
        </div>
    </div>
    
</template>

<script>
import router from '@/router';
import { reactive } from 'vue';
import '../../assets/iconfont/icon.css'
export default {
    setup () {
        const state = reactive({
            frame:false,
            framebgone:false,
            framebgtwo:false,
            introduceItem:[
                {
                    id:1,
                    show:false,
                    title:'API设计',
                    text:[
                        '代码未写，接口先行',
                        '快速API文档预生成',
                        '前后端相辅相成'
                    ],
                    icon:'icon-sheji'
                },
                {
                    id:2,
                    show:false,
                    title:'API调试',
                    text:[
                        'http请求调试',
                        'tcp协议'
                    ],
                    icon:'icon-fenzuguanli'
                },
                {
                    id:3,
                    show:false,
                    title:'自动化测试',
                    text:[
                        '多种条件控制器',
                        '智能平台'
                    ],
                    icon:'icon-lianjie_'
                },
                {
                    id:4,
                    show:false,
                    title:'API文档',
                    text:[
                        '一人定义，全队共享',
                        '实时同步，及时反馈API变更状态',
                        '项目数据安全、人员权限管控轻松'
                    ],
                    icon:'icon-shuipingduiqi'
                }
            ]
        })
        // 鼠标悬浮gitee图标改值
        const appear = () =>{
            state.frame = true
        }
        // 鼠标离开隐藏选择框
        const hidenFrame = () =>{
            state.frame = false
        }
        // 鼠标悬浮gitee图标选择框改颜色
        const appearbg = (e) =>{
            if(e === 1){
                state.framebgone = true
            }else{
                state.framebgtwo = true
            }
        }
        // 鼠标离开隐藏选择框颜色
        const hidenFramebg = (e) =>{
            if(e === 1){
                state.framebgone = false
            }else{
                state.framebgtwo = false
            }
        }
        // 悬浮组件
        const suspension = (id) =>{
            state.introduceItem[id-1].show = true
        }
        // 消失悬浮
        const disSuspension = (id) =>{
            state.introduceItem[id-1].show = false
        }
        // 去到登入页面
        const goLogin = () => {
            router.push('login')
        }
        return {state,appear,hidenFrame,appearbg,hidenFramebg,suspension,disSuspension,goLogin}
    }
}
</script>

<style lang="less" scoped>
.topbar{
    width: 100vw;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(173, 226, 229, 0.633);
    .icon{
        position: absolute;
        top: 16px;
        right: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .urlthree{
            position: absolute;
            top:24px;
            left: 26px;
            border: 6px solid #fff;
            border-left: 6px solid rgba(0, 0, 0, 0);
            border-top: 6px solid rgba(0, 0, 0, 0);
            border-right: 6px solid rgba(0, 0, 0, 0);
        }
        .urlSelect{
            position: absolute;
            top:36px;
            left: 10px;
            width: 48px;
            height: 60px;
            background: #fff;
            .urlSelect-item{
                widows: 48px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
            .item-bg{
                background-color: rgb(208, 208, 208);
            }
            a{
                text-decoration: none;
            }
        }
    }
}
.all{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 300px 0px 300px;
    box-sizing: border-box;
    background:linear-gradient(45deg, blue, red);
    .Name{
        font-size: 60px;
        font-weight: 600;
        font-family: Microsoft YaHei;
    }
    .introduce{
        margin-top: 30px;
        font-size:30px;
        font-family: Microsoft YaHei;
        color: rgb(124, 124, 124);
    }
    .start-button{
        margin-top: 20px;
        margin-left: 800px;
    }
}
.more-introduce{
    width: 100vw;
    height: 300px;
    display: flex;
    padding: 30px 60px 30px 60px;
    box-sizing: border-box;
    // background: rgb(255, 245, 253);
    // background: #767676;
    display: flex;
    justify-content: center;
    .more-introduce-item{
        transition:  all 0.5s;
        cursor: pointer;
        background: rgb(255, 255, 255);
        border-radius: 6px;
        width:280px;
        height: 200px;
        margin-right: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .more-introduce-item-icon{
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: linear-gradient(to right top, rgb(208, 222, 245), #1e80ff);
            border-radius: 6px;
        }
        .icon-bgchange{
            background: linear-gradient(to right top, rgb(244, 245, 208), #f0d92a);
        }
        .more-introduce-item-title{
            margin-top: 18px;
            font-size: 18px;
        }
        .more-introduce-item-box{
            margin-top: 8px;
            font-size: 14px;
            color: rgb(146, 146, 146);
        }
    }
    .sus{
        transition:  all 0.5s;
        box-shadow: 0px 10px 10px 0px rgba(198, 198, 198, 0.5);
        transform: translateY(-20px);
    }
}
</style>